<template>
  <div class="home">
    <el-container class="container">
      <el-header class="header">
        <h3>积云会员管理系统</h3>
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="change">修改密码</el-dropdown-item>
            <el-dropdown-item command="getout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container class="content">
        <el-aside class="aside">51
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            unique-opened="1"
          >
            <el-menu-item v-for="(item,index) in array" :key="index" :index="item.id">
              <i :class="item.icon"></i>
              <span slot="title" class="item"><router-link :to="item.path">{{item.name}}</router-link></span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main">
            <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      username: "",
      array : [
          {id: "1", icon: "el-icon-s-home", name: "首页", path: "/homepage"},
          {id: "2", icon: "el-icon-user-solid", name: "会员管理", path: "/members"},
          {id: "3", icon: "el-icon-s-cooperation", name: "供应商管理", path: "/supplier"},
          {id: "4", icon: "el-icon-s-goods", name: "商品管理", path: "/goods"},
          {id: "5", icon: "el-icon-user", name: "员工管理", path: "/employees"},
      ]
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      let res = await request.get("/user/info");
    //   console.log(res);
      this.username = res.data.data.name;
    },
    handleCommand(val) {
      switch (val) {
        case "change":
          console.log("change");
          break;
        case "getout":
          this.getOut();
          break;
      }
    },
    async getOut() {
      let res = await request.post("/user/logout");
    //   console.log(res);
      if (res.data.flag == true) {
        localStorage.removeItem("token");
        this.$router.push("/login");
        this.$message.success(res.data.message);
      } else {
        this.$message.error(res.data.message);
      }
    },
  },
};
</script>

<style scoped >
.home {
  width: 100%;
  height: 100%;
}
.container {
  height: 100%;
}
.header {
  width: 100%;
  height: 60px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h3 {
  color: #fff;
}
.aside {
  width: 200px !important;
  height: 100% !important;
  background-color: #545c64;
}
.content {
  height: 100%;
}
.el-menu {
  border-right: none;
}
.el-dropdown-link {
  color: #409eff;
}
.main{
    width: 100%;
    height: 100%;
}
.item a{
    text-decoration: none !important;
    color: #fff !important;
}
</style>
